<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top:20px"
      size="small"
    >
      <el-table-column prop="head_img" label="教练头像" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.head_img"
            :preview-src-list="[scope.row.head_img]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="教练姓名"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="car_license"
        label="车牌号"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="phone" label="电话号" show-overflow-tooltip>
      </el-table-column>

      <el-table-column
        prop="car_type"
        label="车辆类型"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="title"
        label="所属训练场"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="drive_age"
        label="驾龄"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
         <span>{{scope.row.drive_age}}年</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="statusText"
        label="认证状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span :style="{'color':scope.row.statusColor}">{{scope.row.statusText}}</span>
        </template>
      </el-table-column>
   
      <el-table-column prop="date" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editItem(scope.row)" v-if="scope.row.status==0">审核</el-button>
          <el-button type="text" @click="lookItem(scope.row)" v-else>查看</el-button>
           <el-button type="text" @click="approval(scope.row)">移交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next"
          :total="pages.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
      value: true,
    };
  },
  props: {
    //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    tabData(val) {
      this.tableData = val.list;
      this.pages = val.page;
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("changepageTotal", val);
    },
    handleCurrentChange(val) {
      this.$emit("changepage", val);
    },
    //编辑
    editItem(val) {
      this.$emit("editItem", val);
    },
    //查看
    lookItem(val) {
      this.$emit("lookItem", val);
    },
             //移交
    approval(val) {
      this.$emit("approval", val);
    },
  },
};
</script>

<style scoped lang='scss'>

</style>
